<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <title>Login</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="semantic.css">
    <script src="../Login%20Example%20-%20Semantic_files/jquery.min.js.下载"></script>
    <script src="../Login%20Example%20-%20Semantic_files/form.js.下载"></script>
    <script src="../Login%20Example%20-%20Semantic_files/transition.js.下载"></script>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
    <style type="text/css">
        body {
            background-color: #DADADA;
        }

        body > .grid {
            height: 100%;
        }

        .image {
            margin-top: -100px;
        }

        .column {
            max-width: 450px;
        }
    </style>
</head>
<body>

<div class="ui middle aligned center aligned grid">
    <div class="column">
        <h2 class="ui image header">
            <div class="content">
                登 录 您 的 账 户
            </div>
        </h2>

        <form class="ui form" action="/login_servlet" method="post">
            <div class="field">
                <h3>账&nbsp;&nbsp;&nbsp;&nbsp;号</h3>
                <div class="ui input icon left">
                    <input type="text" name="username" placeholder="输入您的账号">
                    <i class="user icon"></i>
                </div>

            </div>
            <div class="field">
                <h3>密&nbsp;&nbsp;&nbsp;&nbsp;码</h3>
                <div class="ui input icon left">
                    <input type="password" name="password" id="PASSWORD" placeholder="输入您的密码">
                    <i class="lock icon"></i>
                </div>
            </div>

            <button class="ui button black " type="submit" id="submit">登录</button>
        </form>
<!--        <div class="ui segment basic">-->
<!--            新 用 户 ? &nbsp;&nbsp;&nbsp;<a href="register.html">注 册</a>-->
<!--        </div>-->

    </div>
</div>


</body>

<script>
    $(document).ready(function () {
        $('#submit').click(function () {
            let passMd5_1 = md5($('#PASSWORD').val());
            let passMd5_2 = md5(passMd5_1.substring(0, 5));
            $('#PASSWORD').val(passMd5_2);
            console.log($('#PASSWORD').val())
            $('#submit').submit();
        })
    })
</script>


</html>